import React, { useState, useEffect } from 'react';
import { Row, Col, Button, Empty } from 'antd';
import { randomKey } from 'src/utils/utils';
import WarningRuleItem from './WarningRuleItem';
import * as services from 'src/services/api/monitor';

/**
 * @component WarningRules 报警规则配置组件
 * @prop {Array} value 组件值
 *
 * @prop {Function} onChange 改变值之后的回调
 * @prop {Object} variable 可被用于选择的变量对象
 */

export default function WarningRules(props) {
  const [rules, setRules] = useState(props.value || []);
  const [variable, setVariable] = useState([]);

  useEffect(() => {
    getVariables();
  }, []);

  useEffect(() => {
    if (props.value.length > 0) {
      setRules(initData(props.value));
    }
  }, [props.value]);

  function initData(data) {
    const newData = data.map((item) => {
      item.id = item.id ? item.id : randomKey();
      return item;
    });
    return newData;
  }

  function getVariables() {
    services.devOpt.warningMonitorVariables().then((res) => {
      if (res.code === 0) {
        setVariable(res.data);
      }
    });
  }

  //添加规则
  function addRule() {
    const rule = {
      condition: {},
      status: 1,
      id: randomKey(),
    };
    rules.push(rule);
    setRules(Object.assign([], rules));
    props.onChange && props.onChange(rules);
  }

  // 修改item的value回调
  function handleChange(id, value) {
    for (let i = 0; i < rules.length; i++) {
      if (rules[i].id === id) {
        rules[i] = value;
      }
    }
    setRules(Object.assign([], rules));
    props.onChange && props.onChange(rules);
  }

  // 删除
  function del(index) {
    rules.splice(index, 1);
    setRules(Object.assign([], rules));
    props.onChange && props.onChange(rules);
  }

  // 移动
  function move(item, index, step) {
    // 下移
    if (step === 'down') {
      rules.splice(index, 1); //移除当前项
      rules.splice(index + 1, 0, item); // 在index+1处插入当前item
      // 上移
    } else if (step === 'up') {
      rules.splice(index, 1); //移除当前项
      rules.splice(index - 1, 0, item); // 在index-1处插入当前item
    }
    setRules(Object.assign([], rules));
    props.onChange && props.onChange(rules);
  }
  return (
    <div className='rule-wp'>
      <Row type='flex' justify='start' gutter={10} style={{ marginBottom: '10px' }}>
        <Col>
          <Button
            type='primary'
            onClick={() => {
              addRule();
            }}
          >
            添加规则
          </Button>
        </Col>
      </Row>
      <Row type='flex' justify='space-between' align='middle' gutter={10} className='rule-hd'>
        <Col span={6}>名称</Col>
        <Col span={4}>监控周期</Col>
        <Col span={8}>报警规则</Col>
        <Col span={2}>状态</Col>
        {!props.disabled && <Col span={4}>操作</Col>}
      </Row>
      {!rules.length && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description='请添加规则' />}
      {rules.map((item, index) => {
        return (
          <WarningRuleItem
            value={item}
            index={index + 1}
            key={item.id}
            variable={variable}
            disabled={props.disabled}
            onChange={handleChange.bind(this, item.id)}
            operatorOptions={props.operator}
            onDel={del.bind(this, index)}
            onMove={move.bind(this, item, index)}
            len={rules.length}
            form={props.form}
            codes={props.codes}
            isOld={props.isOld}
            strategyId={props.id}
          />
        );
      })}
    </div>
  );
}
